<template>
	<div class="FirstPageE">
	
		<el-container class="el-page">
		  <el-header class="head">
			<el-row style="margin-top: 2%;">
			   <el-col :span="10">
				   <div>
				   <span style="font-size: 18px;">时间周期：</span>	
				     
				      <el-date-picker
				             v-model="timePeriod"
				             @change="setWeekAndYear"
				      		 class="datePicker"
				             type="week"
				             format="yyyy 第 WW 周"
				             placeholder="请选择周次">
				         </el-date-picker>
						 <el-button type="primary"  @click="search()">搜索</el-button>	
				   </div>
				   
			   </el-col>

			</el-row> 
		  </el-header>

		  <el-container>
		  <el-main class="left">
				 
				  	
				  	<div class="left_main">
				  		<div class="subTitle">
				  			报 警 频 率 排 行
				  		</div>
							<ve-histogram :data="frequenceData"  :legend-visible="false" :extend="chartExtend"></ve-histogram>	
				  	</div>
				
			  
		  </el-main>
		  <el-main class="right">
				<div class="right_main">
					<div class="subTitle">
						报 警 趋 势 分 析
					</div>
					      <ve-line :data="trendData"></ve-line>
				</div>		  
		  </el-main>
		  </el-container>
		</el-container>		
	</div>
</template>

<script>
	export default {
		data() {

			return {
				
				     
				       trendData:{},
				       frequenceData:{},
						year:'',//年 字符串 2021
						week:'',//周 字符串 3
						timePeriod: '',
				     						
				     frequenceColumnsList: [ "描述","异常数"],
				     frequenceList: [
				     						
				     ],
				     
				    trendList:[] ,
					trendListOrigin:[
									{week:1,  "一级告警": 0 ,"二级告警":0},
									{week: 2,  "一级告警": 0 ,"二级告警":0},
									{week: 3,  "一级告警": 0, "二级告警":0},
									{week: 4,  "二级告警": 0, "一级告警":0},
									{week: 5,  "二级告警": 0, "一级告警":0},
									{week: 6,  "二级告警": 0, "一级告警":0},
									{week: 7,  "一级告警": 0, "二级告警":0}
								],
					frequenceListOrigin:[
									{"描述":"暂无","异常数":0},
									{"描述":"暂无","异常数":0},
									{"描述":"暂无","异常数":0},
									{"描述":"暂无","异常数":0},
									{"描述":"暂无","异常数":0},
									
								],
					trendColumnsList:["week", "一级告警", "二级告警"], 
					chartExtend: {
					// x轴字体斜显示
							xAxis: {
							axisLabel: {
								interval: 0,
								show:false
								
								//rotate: 90 // 旋转的度数
					
					                }
					           }
					},
				
			}
		},
		created() {
			this.timePeriod=new Date();
			this.setWeekAndYear();
			//柱状图
			this.axios({
				method:"get",
				url:`/abDataOp/sumTagByWeek?year=${parseInt(this.year)}&week=${parseInt(this.week)}`
			
			 }).then(r=>{
				 //console.log(r.data)
				 if(r.data.length!=0){
				 	//console.log('1111');
				   this.frequenceList=r.data;
				   }
				   //返回为空则取default值
				   else{
				   	//console.log('1111');
				     this.frequenceList=this.frequenceListOrigin;
				     }
							  
							  this.frequenceData= {
							               columns: this.frequenceColumnsList,
							               //rows: this.frequenceList,
										  rows: this.JsonSort(this.frequenceList,'异常数')
							           }    
			});
			
			//折线图
			this.axios({
				method:"get",
				url:`/abDataOp/sumClassByDay?year=${parseInt(this.year)}&week=${parseInt(this.week)}`
			 }).then(r=>{
							//如果有返回值，赋值给trendList
							if(r.data.length!=0){
								//console.log('1111');
							  this.trendList=r.data;
							  }
							  //返回为空则取default值
							  else{
							  	//console.log('1111');
							    this.trendList=this.trendListOrigin;
							    }
								//处理周数
							  this.trendData= {
							               columns: this.trendColumnsList,
							               rows: this.dealWithWeek(this.trendList)
							           }    		  
			});
	 
		},
		
		methods: {
			setWeekAndYear(){
				var moment = require("moment");
				//注意，当返回值是中国标准时间的格式时使用moment.js的时候一定要加上.utcOffset(480)，用来转换时区
				this.week= moment(this.timePeriod).utcOffset(480).format("W")
				this.$emit('transfertimePeriod',this.week)
				this.year=moment(this.timePeriod).utcOffset(480).format("yyyy")
			  },
			
			search(){
				//柱状图
				this.axios({
					method:"get",
					url:`/abDataOp/sumTagByWeek?year=${parseInt(this.year)}&week=${parseInt(this.week)}`

				 }).then(r=>{
								 if(r.data.length!=0){
								   this.frequenceList=r.data;
								   }
								   //返回为空则取default值
								   else{
								   	//console.log('1111');
								     this.frequenceList=this.frequenceListOrigin;
								     }
								  this.frequenceData= {
								               columns: this.frequenceColumnsList,
								               //rows: this.frequenceList
											   rows: this.JsonSort(this.frequenceList,'异常数')
								           }    		  
				});
				
				//折线图
				this.axios({
					method:"get",
					url:`/abDataOp/sumClassByDay?year=${parseInt(this.year)}&week=${parseInt(this.week)}`
				 }).then(r=>{
								if(r.data.length!=0){
								  this.trendList=r.data;
								  }
								  else{
								  	//console.log('1111');
								    this.trendList=this.trendListOrigin;
								    }
								  this.trendData= {
								               columns: this.trendColumnsList,
								               rows: this.dealWithWeek(this.trendList)
								           }    
								  
				});
	 
			},
			//后端传入数据不足七条的，把没有的天数补全0，0，并把周对应int转换为汉字
			dealWithWeek(list){
				let weekList=[
									{week:1,  "一级告警": 0 ,"二级告警":0},
									{week: 2,  "一级告警": 0 ,"二级告警":0},
									{week: 3,  "一级告警": 0, "二级告警":0},
									{week: 4,  "二级告警": 0, "一级告警":0},
									{week: 5,  "二级告警": 0, "一级告警":0},
									{week: 6,  "二级告警": 0, "一级告警":0},
									{week: 0,  "一级告警": 0, "二级告警":0}
								];
				for(var i=0;i<weekList.length;i++){
					for(var j=0;j<list.length;j++){
						if(list[j].week==(i+1)){
							weekList[i]=list[j]
						}
						if(list[j].week==0){
							weekList[6]=list[j]
						}
					}
					weekList[i].week=this.weekToText(weekList[i].week)
				}
				return weekList

			},
			//week转汉字
			weekToText(val){
				let weekText=" "
				if(val==1||val=='1'){
					weekText="周一"
				}
				else if(val==2||val=='2'){
					weekText="周二"
				}
				else if(val==3||val=='3'){
					weekText="周三"
				}
				else if(val==4||val=='4'){
					weekText="周四"
				}
				else if(val==5||val=='5'){
					weekText="周五"
				}
				else if(val==6||val=='6'){
					weekText="周六"
				}
				else if(val==0||val=='0'){
					weekText="周日"
				}
				return weekText
			},
			JsonSort(json,key){
			    //console.log(json);
			    for(var j=1,jl=json.length;j < jl;j++){
			        var temp = json[j],
			            val  = temp[key],
			            i    = j-1;
			        while(i >=0 && json[i][key]<val){
			            json[i+1] = json[i];
			            i = i-1;    
			        }
			        json[i+1] = temp;
			
			    }
			    //console.log(json);
				var json1=[];
				if(json.length>=5){
				for(var k=0;k<5;k++){
					json1[k]=json[k]
				}
				}
				else{
					for(var k=0;k<json.length;k++){
						json1[k]=json[k]
					}
				}
			    return json1
			
			},

			
			 
	
		}
	}
</script>

<style lang="less">
	.FirstPageE{
		height: 100%;
		width:100%;
	.el-page{
		height:100%
	}
	 
		.head{
			//background-color: #42B983;
			height:10%;
			width:100%;
			
			
		}
		.left{
		  //background-color: #B3C0D1;
				height:100%;
		  //color: #333;
				width:50%;
		  text-align: center;
		  .left_main{
		  	position: relative;
		  	      top: 50%;
		  	      transform: translateY(-42%);
		  }
		  }
		  .right{
		   // background-color: yellow;
		  		height:100%;
		    //color: #333;
		  		width:50%;
		    text-align: center;
			.right_main{
				position: relative;
				      top: 50%;
				      transform: translateY(-42%);
			}
			}

	  .alarmLabel{
		  font-size: 20px;
	  }
	  .alarmNum{
	  	font-size: 32px;
	  }
	  .subTitle{
		  font-size: 25px;
	  }

		}
</style>
